
export function render(shadowRoot, css) {
    // 主题配置 - 符合整体设计风格
    const theme = {
        "bgc" : "#111111ee",  //背景颜色
        "tc" : "#fff",        //文本颜色
        "menuFontSize" : "24px",  //文本的文字大小
        "screenRate" : "100%",
        "topHeight" : "76px",      //顶部栏统一高度
        "topMarginBottom" : "20px",  //顶部栏目 的 底部外边距离
        "leftMenuWidth" : "180px",  //左边菜单的宽度
        "iconColor" : "#fff",  //图标颜色
        "iconFontSize" : "16px",  //图标字体大小
        "iconPrimaryColor" : "deepskyblue"  //主要图标颜色（如登录图标）
    };
    // 生成40个随机卡片数据
    const generateCards = () => {
        const cards = [];
        const categories = ['nature', 'city', 'tech', 'food', 'travel', 'art', 'sports', 'music'];
        const titles = [
            '精彩瞬间', '美好时光', '创意设计', '生活记录', '旅行日记', 
            '美食分享', '运动健身', '音乐欣赏', '艺术创作', '科技前沿',
            '自然风光', '城市印象', '人文摄影', '时尚潮流', '学习笔记'
        ];
        
        for (let i = 1; i <= 40; i++) {
            const category = categories[Math.floor(Math.random() * categories.length)];
            const title = titles[Math.floor(Math.random() * titles.length)];
            const randomId = Math.floor(Math.random() * 1000) + 1;
            
            cards.push({
                id: i,
                title: `${title} ${i}`,
                image: `https://picsum.photos/300/200?random=${randomId}`,
                author: `用户${Math.floor(Math.random() * 999) + 1}`,
                likes: Math.floor(Math.random() * 9999) + 1,
                views: Math.floor(Math.random() * 99999) + 100,
                category: category
            });
        }
        return cards;
    };

    const cards = generateCards();
    
    shadowRoot.innerHTML = `
        <style>
            :host {
                display: block;
                padding: 20px;
                background: ${theme.bgc};
                min-height: 100vh;
                color: ${theme.tc};
            }
            
            .recommend-container {
                max-width: 1200px;
                margin: 0 auto;
            }
            
            .recommend-title {
                font-size: 28px;
                font-weight: bold;
                color: ${theme.tc};
                margin-bottom: 30px;
                text-align: center;
            }
            
            .cards-grid {
                display: grid;
                grid-template-columns: repeat(4, 1fr);
                gap: 20px;
                margin-bottom: 20px;
            }
            
            .card {
                background: rgba(255, 255, 255, 0.05);
                border: 1px solid rgba(255, 255, 255, 0.1);
                border-radius: 12px;
                overflow: hidden;
                box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
                transition: all 0.3s ease;
                cursor: pointer;
                backdrop-filter: blur(10px);
            }
            
            .card:hover {
                transform: translateY(-5px);
                box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
                border-color: ${theme.iconPrimaryColor};
                background: rgba(255, 255, 255, 0.08);
            }
            
            .card-image {
                width: 100%;
                height: 180px;
                object-fit: cover;
                background: rgba(255, 255, 255, 0.05);
            }
            
            .card-content {
                padding: 15px;
            }
            
            .card-title {
                font-size: 16px;
                font-weight: 600;
                color: ${theme.tc};
                margin-bottom: 8px;
                line-height: 1.4;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
            
            .card-author {
                font-size: 14px;
                color: rgba(255, 255, 255, 0.7);
                margin-bottom: 10px;
            }
            
            .card-stats {
                display: flex;
                justify-content: space-between;
                align-items: center;
                font-size: 12px;
                color: rgba(255, 255, 255, 0.6);
            }
            
            .stat-item {
                display: flex;
                align-items: center;
                gap: 4px;
            }
            
            .stat-icon {
                width: 14px;
                height: 14px;
                fill: ${theme.iconColor};
            }
            
            .category-tag {
                display: inline-block;
                padding: 2px 8px;
                background: ${theme.iconPrimaryColor};
                color: ${theme.tc};
                border-radius: 12px;
                font-size: 11px;
                font-weight: 500;
                margin-bottom: 8px;
                opacity: 0.9;
            }
            
            @media (max-width: 1024px) {
                .cards-grid {
                    grid-template-columns: repeat(3, 1fr);
                }
            }
            
            @media (max-width: 768px) {
                .cards-grid {
                    grid-template-columns: repeat(2, 1fr);
                    gap: 15px;
                }
                
                :host {
                    padding: 15px;
                }
            }
            
            @media (max-width: 480px) {
                .cards-grid {
                    grid-template-columns: 1fr;
                }
            }
        </style>
        
        <div class="recommend-container">
            <h1 class="recommend-title">推荐内容</h1>
            <div class="cards-grid">
                ${cards.map(card => `
                    <div class="card" data-id="${card.id}">
                        <img class="card-image" data-src="${card.image}" alt="${card.title}" loading="lazy">
                        <div class="card-content">
                            <div class="category-tag">${card.category}</div>
                            <div class="card-title">${card.title}</div>
                            <div class="card-author">@${card.author}</div>
                            <div class="card-stats">
                                <div class="stat-item">
                                    <svg class="stat-icon" viewBox="0 0 24 24">
                                        <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/>
                                    </svg>
                                    ${card.likes}
                                </div>
                                <div class="stat-item">
                                    <svg class="stat-icon" viewBox="0 0 24 24">
                                        <path d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z"/>
                                    </svg>
                                    ${card.views}
                                </div>
                            </div>
                        </div>
                    </div>
                `).join('')}
            </div>
        </div>
    `;
    
    // 添加卡片点击事件
    shadowRoot.querySelectorAll('.card').forEach(card => {
        card.addEventListener('click', () => {
            const cardId = card.dataset.id;
            console.log(`点击了卡片 ${cardId}`);
            // 这里可以添加跳转到详情页的逻辑
        });
    });
}